<template lang="pug">
  .tab-box(:class="!isVertical? 'row-style' : 'column-style'")
    ul
      li.li-style(
        v-for="(item, index) in tabList"
        :key="index"
        v-if="!item.isHide")
        .btn-style(@click="toggle(index)" :class="[addClass, curIndex === index ? 'activeBtn' : '']")
          span
            i(v-if="item.icon"
              :class="['iconfont', 'icon-'+item.icon]")
          | {{item.label}}
    .content-style
      component(v-if="curTabObj.component"
        :is="curTabObj.component"
        :propDatas="curTabObj"
        :current-tab="curIndex")
      template(v-else)
        slot(:name="curTabObj.name")
</template>

<script>
/**
 * @name tabPage 标签组件
 * @author linmn
 * @description
 *  支持横向、纵向显示标签位置。
 *  支持自定义样式
 *  支持直接嵌入组件显示，或者使用slot插槽显示tab对应的内容
 *  自由跳转 TODO
 *    */
export default {
  name: 'TabPage',
  props: {
    tabList: {
      type: Array,
      default: () => []
    },
    isVertical: {
      type: Boolean,
      default: false
    },
    addClass: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    actIndex: {
      type: Number,
      default: 0
    },
    path: String
  },
  watch: {
    actIndex (index) {
      this.tempIndex = this.tabList[index] && !this.tabList[index].isHide ? index : 0
      this.toggle(this.tempIndex)
    }
  },
  computed: {
    curTabObj () {
      return this.tabList[this.curIndex]
    },
    curIndex: {
      set (index) {
        this.tempIndex = index
      },
      get () {
        return this.tabList[this.tempIndex] ? this.tempIndex : 0
      }
    }
  },
  data () {
    return {
      tempIndex: this.actIndex // 当前索引
    }
  },
  methods: {
    toggle (index) {
      this.curIndex = index
      this.$emit('activeIndex', index)
    }
  }
}
</script>

<style lang="sass" scoped>
$border-col: #c9ccd1
.tab-box
  display: flex
  width: 100%
  // min-height: 600px
  background: #fff
.row-style
  flex-direction: column
  &>ul
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    position: relative
    background: #fff
    color: #555
    min-height: 42px
    // margin-bottom: 5px
    .li-style
      width: 100%
      height: 42px
      text-align: center
      cursor: pointer
      // height: 20%
  .content-style
    flex: 1
    // position: relative
    overflow-y: auto
    overflow-x: hidden
    // padding: 10px
    // position: absolute
    // left: 0
.column-style
  height: 100%
  display: flex
  &>ul
    // display: flex
    flex-direction: column
    position: relative
    background: #fff
    color: #555
    height: 100%
    min-width: 42px
    border-right: 1px solid $border-col
    .li-style
      flex: 1
      line-height: 1.5
      width: 42px
      cursor: pointer
      border-bottom: 1px solid $border-col
      // &:not(:last-child)
      //   border-bottom: 1px solid $border-col
      // &:not(:last-child):after
      //   height: 1px
      //   width: 22px
      //   position: absolute
      //   bottom: 0
      //   left: 50%
      //   margin-left: -10px
      //   background: #c9ccd1
  .content-style
    flex: 1
    overflow-y: auto
    overflow-x: hidden
.btn-style
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  height: 100%
  padding: 12px
  text-align: center
.activeBtn
  background: #29a1f7
  color: #fff
.iconfont
  margin: 4px
</style>
